{extend name="base" /}
{block name="head"}
<meta name="description" content="">
<meta name="keywords" content="">
<title>委托-交易中心</title>
{/block}
{block name="css"}
{css file="/static/css/trade/trade.css"}
{/block}
{block name="header"}{include file="public/header" /}{/block}
{block name="main"}
<div class="am-container tr-entrust" id="entrust">
    <div class="am-g">
        <div class="am-u-md-2 am-padding-right">
            {include file="trade/trade-left" /}
        </div>
        <div class="am-u-md-10 am-padding-horizontal-sm">
            <div class="am-tabs tr-tabs" id="tr-tabs" data-am-tabs="{noSwipe: 1}">
                <ul class="am-tabs-nav am-nav am-nav-tabs">
                    <li class="am-active"><a href="javascript:;" class="item" type="positions">当前持仓</a></li>
                    <li><a href="javascript:;" class="item" type="entrust">当日委托</a></li>
                    <li><a href="javascript:;" class="item" type="deal">当日成交</a></li>
                    <li><a href="javascript:;" class="item" type="historical">历史委托</a></li>
                    <li><a href="javascript:;" class="item" type="trans">历史成交</a></li>
                </ul>
                <div class="am-tabs-bd">
                    <div class="am-tab-panel am-active">
                        <table class="am-table am-table-centered">
                            <thead>
                                <tr>
                                    <th width="18%">股票名称(代码)</th>
                                    <th>持仓数量</th>
                                    <th>可卖数量</th>
                                    <th>成本</th>
                                    <th>最新价</th>
                                    <th>市值</th>
                                    <th>盈亏</th>
                                    <th>盈亏比例</th>
                                    <th width="14%">建仓时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template v-if="positions.length > 0">
                                    <tr v-for="(item, index) in positions">
                                        <td><a :href="item.stock_url" target="_blank" rel="nofollow"><span class="tr-shares-name">{{ item.title }}</span></a></td>
                                        <td>{{ item.position_number }}</td>
                                        <td>{{ item.available_number }}</td>
                                        <td><span class="tr-color-price">{{ item.cost_price }}</span></td>
                                        <td><span class="tr-color-price">{{ item.price }}</span></td>
                                        <td><span class="tr-color-price">{{ item.assets }}</span></td>
                                        <td><span :class="item.ratio_class">{{ item.profit }}</span></td>
                                        <td><span :class="item.ratio_class">{{ item.ratio }}</span></td>
                                        <td><span>{{ item.time }}</span></td>
                                    </tr>
                                </template>
                                <template v-else>
                                    <tr>
                                        <td colspan="9"><span>暂无数据</span></td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                    <div class="am-tab-panel">
                        <table class="am-table am-table-centered">
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th width="20%">股票名称(代码)</th>
                                    <th>买入/卖出</th>
                                    <th>委托价格(&yen;)</th>
                                    <th>委托数量</th>
                                    <th width="20%">委托时间</th>
                                    <th>成交状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template v-if="today_entrust.length > 0">
                                    <tr v-for="(item, index) in today_entrust">
                                        <td><span>{{ index+1 }}</span></td>
                                        <td><a :href="item.stock_url" target="_blank" rel="nofollow"><span class="tr-shares-name">{{ item.title }}</span></a></td>
                                        <td><span :class="item.type_class">{{ item.type_label }}</span></td>
                                        <td><span class="tr-price">{{ item.entrustment }}</span></td>
                                        <td>{{ item.number }}</td>
                                        <td>{{ item.time }}</td>
                                        <td><span>{{ item.status_name }}</span></td>
                                        <td><template v-if="item.status == 0"><a href="javascript:;" class="am-btn am-btn-link" :id="item.id" v-on:click="revoke" title="">撤销</a></template></td>
                                    </tr>
                                </template>
                                <template v-else>
                                    <tr>
                                        <td colspan="8"><span>暂无数据</span></td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                    <div class="am-tab-panel">
                        <table class="am-table am-table-centered">
                            <thead>
                                <tr>
                                    <th>股票名称(代码)</th>
                                    <th>买入/卖出</th>
                                    <th>成交价格(&yen;)</th>
                                    <th>成交数量</th>
                                    <th>成交金额(&yen;)</th>
                                    <th>成交时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template v-if="today_turnover.length > 0">
                                    <tr v-for="item in today_turnover">
                                        <td><a :href="item.stock_url" target="_blank" rel="nofollow"><span class="tr-shares-name">{{ item.title }}</span></a></td>
                                        <td><span :class="item.type_class">{{ item.type_label }}</span></td>
                                        <td><span class="tr-price">{{ item.price }}</span></td>
                                        <td>{{ item.number }}</td>
                                        <td><span class="tr-price">{{ item.turnover }}</span></td>
                                        <td>{{ item.deal_time }}</td>
                                    </tr>
                                </template>
                                <template v-else>
                                    <tr>
                                        <td colspan="6"><span>暂无数据</span></td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                    <div class="am-tab-panel">
                        <table class="am-table am-table-centered">
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>股票名称(代码)</th>
                                    <th>买入/卖出</th>
                                    <th>委托价格(&yen;)</th>
                                    <th>委托数量</th>
                                    <th>委托时间</th>
                                    <th>成交状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template v-if="history_entrust.length > 0">
                                    <tr v-for="(item, index) in history_entrust">
                                        <td><span>{{ item.id }}</span></td>
                                        <td><a :href="item.stock_url" target="_blank" rel="nofollow"><span class="tr-shares-name">{{ item.title }}</span></a></td>
                                        <td><span :class="item.type_class">{{ item.type_label }}</span></td>
                                        <td><span class="tr-price">{{ item.entrustment }}</span></td>
                                        <td>{{ item.number }}</td>
                                        <td>{{ item.time }}</td>
                                        <td><span>{{ item.status_name }}</span></td>
                                    </tr>
                                </template>
                                <template v-else>
                                    <tr>
                                        <td colspan="7"><span>暂无数据</span></td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                        <div class="am-panel-footer page">
                            <entrust-page :cur.sync="history_entrust_page.page" :all.sync="history_entrust_page.page_total" v-on:btn-click="orderPage"></entrust-page>
                        </div>
                    </div>
                    <div class="am-tab-panel">
                        <table class="am-table am-table-centered">
                            <thead>
                                <tr>
                                    <th>股票名称(代码)</th>
                                    <th>买入/卖出</th>
                                    <th>成交价格(&yen;)</th>
                                    <th>成交数量</th>
                                    <th>成交金额(&yen;)</th>
                                    <th>成交时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template v-if="history_turnover.length > 0">
                                    <tr v-for="item in history_turnover">
                                        <td><a :href="item.stock_url" target="_blank" rel="nofollow"><span class="tr-shares-name">{{ item.title }}</span></a></td>
                                        <td><span :class="item.type_class">{{ item.type_label }}</span></td>
                                        <td><span class="tr-price">{{ item.price }}</span></td>
                                        <td>{{ item.number }}</td>
                                        <td><span class="tr-price">{{ item.turnover }}</span></td>
                                        <td>{{ item.deal_time }}</td>
                                    </tr>
                                </template>
                                <template v-else>
                                    <tr>
                                        <td colspan="6"><span>暂无数据</span></td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                        <div class="am-panel-footer page">
                            <turnover-page :cur.sync="history_turnover_page.page" :all.sync="history_turnover_page.page_total" v-on:btn-click="orderPage"></turnover-page>
                        </div>
                    </div>
                </div>
            </div>  
        </div>      
    </div>       
</div>     
{/block}
{block name="footer"}
    {include file="public/footer" /}
    {include file="public/modal" /}
{/block}
{block name="js"}
    {js href="/static/js/public/modal.js"}
    {css href="/static/css/public/pagination.css" /}
    {js href="/static/js/widget/page.js" /}
    {js href="/static/js/trade/entrust.js"}
{/block}